<template>
  <div class="c_19">
    <div class="c_">
      <div class="c_fir">
        <div class="cf_left">
          <img class="cfl_img" :src="showInfo.userInfo.photo" />
        </div>
        <div class="cf_right">
          <div class="cfr_title" v-text="showInfo.userInfo.name"></div>
          <div class="cfr_age" v-text="'.' + showInfo.userInfo.age"></div>
        </div>
      </div>
      <div class="c_sec" v-text="showInfo.userInfo.production"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { getInfo } from "@/apis/demo";
import type { userType } from "@/components/type/type";

const showInfo = reactive<{ userInfo: userType }>({
  userInfo: { name: "", age: -1, photo: "", production: "" },
});

// await是必须的
await getInfo().then((res) => {
  if (res.code == 200) {
    showInfo.userInfo = res.data.userInfo;
  }
});
</script>

<style scoped lang="scss">
.c_19 {
  width: 100%;
  .c_ {
    width: 440px;
    min-height: 200px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
      0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
    .c_fir {
      display: flex;
      .cf_left {
        width: 80px;
        height: 80px;
        background: #eee;
        border-radius: 50%;
        border: 1px solid #ddd;
        overflow: hidden;
        .cfl_img {
          width: 100%;
          height: 100%;
          -webkit-user-drag: none;
        }
      }
      .cf_right {
        margin-left: 20px;
        width: calc(100% - 100px);
        height: 80px;
        display: flex;
        .cfr_title {
          font-size: 30px;
          font-weight: bold;
          align-items: flex-end;
          display: flex;
          padding-bottom: 10px;
          color: #666;
        }
        .cfr_age {
          font-size: 14px;
          color: #999;
          display: flex;
          padding-bottom: 10px;
          align-items: flex-end;
          margin-left: 10px;
        }
      }
    }
    .c_sec {
      width: 100%;
      color: #999;
      font-size: 14px;
      margin-top: 20px;
    }
  }
}
</style>
